<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id = "app">
      <span id="name">{{name}}</span>
      <button @click="updateName">更新</button>
      <button @click="destroy">销毁</button>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          name: 'hello !'
        },
        methods: {
          updateName(){
            console.log("准备修改名字啦!")
            this.name = 'hello 图灵!'
          },
          destroy() {
            vm.$destroy()
            }
          },

          beforeCreate() {
            // 此时页面数据未初始化
            console.log('beforeCreate:' + this.name) // beforeCreate undefined
          },
          beforeMount() {
            console.log('beforeMount:' + this.name) // beforeMount hello !
            console.log("html模板未渲染:" + document.getElementById("name").innerText);
          },
          mounted() {
            console.log('mounted:' + this.name) // mounted hello !
            console.log("html模板已渲染:" + document.getElementById("name").innerText);
          },
           // 点击更新按钮后会先触发 beforeUpdate
           beforeUpdate() {
            console.log('beforeUpdate:' + this.name) // beforeUpdate hello !
            console.log("html模板未更新:" + document.getElementById("name").innerText);
           },
           updated(){
            console.log('updated:'+this.name) // updated hello 图灵 ！
            console.log("html模板已更新:" + document.getElementById("name").innerText);
           },
            // 点击销毁按钮后会先触发 beforeDestroy
            beforeDestroy(){
             console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
             console.log("销毁前:" + document.getElementById("name").innerText);
          },
            destroyed(){
              console.log('destroyed: success') // destroyed: success
               // 在这之后点击页面 更新 按钮将无任何效果
               console.log("销毁后:" + document.getElementById("name").innerText);
          },
      });
    </script>

</body>
</html>